<template>
  <div class="index">
    <!-- 最顶部会隐藏的固定的条 -->
    <div class="topfixed" :style="{top: topFixedTop + 'px'}"></div>
    <!-- <div class="topfixed"></div> -->
    <!-- 顶部导航 -->
    <top-bar />
    <!-- 顶部搜索框 logo 购物车导向 -->
    <top-menu />
    <!-- 分类 轮播图 广告-->
    <!-- <main-top :data="indexSwiperData"/> -->
    <main-top :data="[indexSwiperData, catTreeData]" />
    <!-- 秒杀 -->
    <seckill />

    <!-- 每日特价 品牌闪购 -->
    <transition name="fade">
      <div v-if="tejiaData.length>0" class="container">
        <div class="row gutter tj">
          <!-- 每日特价 -->
          <div class="col-6">
            <te-jia :data="tejiaData" />
          </div>
          <!-- 品牌闪购 -->
          <div class="col-6" v-if="shangouData.length>0">
            <san-gou :data="shangouData" />
          </div>
        </div>
      </div>
    </transition>

    <!-- 发现好货 -->
    <transition name="fade">
      <div v-if="haohuoData.length>0" class="container mt20">
        <div class="row gutter">
          <div class="col-2">
            <Haohuo />
          </div>
          <div class="col-10">
            <drag-swiper :data="haohuoData" />
          </div>
        </div>
      </div>
    </transition>

    <!-- 新品首发 排行榜 好店 领券 -->
    <transition name="fade">
      <div v-if="xinpinData.length>0" class="container mt20">
        <div class="row gutter">
          <div class="col-3">
            <card title="新品首发">
              <m-swiper />
            </card>
          </div>
          <div class="col-3">
            <card title="排行榜">
              <topn />
            </card>
          </div>
          <div class="col-3">
            <card title="逛好店">
              <haodian />
            </card>
          </div>
          <div class="col-3">
            <card title="领券中心">
              <lingquan />
            </card>
          </div>
        </div>
      </div>
    </transition>

    <!-- 频道广场 -->
    <transition name="fade">
      <div v-if="pindaoData.length>0" class="container">
        <dot-title title="频道广场" />
        <div class="row gutter">
          <div class="col-3">
            <img
              style="width: 100%;"
              src="http://img10.360buyimg.com/babel/s580x740_jfs/t1/94263/15/13795/110996/5e5c62b6E895123be/b750358a76df026b.jpg!cc_290x370.webp"
              alt
            />
          </div>
          <div class="col-3">
            <img
              style="width: 100%;"
              src="http://img14.360buyimg.com/babel/s580x740_jfs/t1/105944/21/15971/217665/5e7464b8Ef95a06e5/6830ee12711db92b.jpg!cc_290x370.webp"
              alt
            />
          </div>
          <div style="margin-bottom: 10px" class="col-3" v-for="(item, index) in 16" :key="index">
            <channel-item
              title="中外名酒"
              stitle="享全球美酒品美好生活"
              limg="https://img10.360buyimg.com/img/s200x200_jfs/t1759/315/995922429/120626/5f7fbec6/55ded74cNdf9979db.jpg!cc_100x100.webp"
              rimg="https://img11.360buyimg.com/img/s200x200_jfs/t1/66360/16/10424/236214/5d80459aE12915a7c/9030bbacf24f078d.jpg!cc_100x100.webp"
            />
          </div>
        </div>
      </div>
    </transition>

    <!-- 推荐 -->
    <transition name="fade">
      <div v-if="recData.length>0" class="container">
        <dot-title title="为你推荐" />
        <div class="row gutter">
          <div v-for="(item, index) in 25" :key="index" style="margin-bottom: 10px" class="col-b20">
            <rec-item
              :price="1769.00"
              title="NEXGIM AI功率健身车小米动感单车|表单运动减肥表单运动减肥表单运动减肥表单运动减肥"
              image="https://img12.360buyimg.com/jdcms/s300x300_jfs/t1/91268/22/2070/39606/5dc923ffE1d95360d/da614d0ae8deff05.jpg.webp"
            />
          </div>
        </div>
      </div>
    </transition>

    <!-- 页脚 -->
    <div class="footer mt20"></div>
  </div>
</template>

<script>
import TopBar from "~/components/TopBar";
import TopMenu from "~/components/TopMenu";
import MainTop from "~/components/MainTop";
import Seckill from "~/components/Seckill";
import TeJia from "~/components/TeJia";
import SanGou from "~/components/SanGou";
import Haohuo from "~/components/Haohuo";
import DragSwiper from "~/components/DragSwiper";
import Card from "~/components/Card";
import MSwiper from "~/components/MSwiper";
import Topn from "~/components/Topn";
import Haodian from "~/components/Haodian";
import Lingquan from "~/components/Lingquan";
import DotTitle from "~/components/DotTitle";
import ChannelItem from "~/components/ChannelItem";
import RecItem from "~/components/RecItem";

import { getScrollTop, getScrollHeight, getWindowHeight } from "~/assets/util";

export default {
  components: {
    TopBar,
    TopMenu,
    MainTop,
    Seckill,
    TeJia,
    SanGou,
    Haohuo,
    DragSwiper,
    Card,
    MSwiper,
    Topn,
    Haodian,
    Lingquan,
    DotTitle,
    ChannelItem,
    RecItem
  },
  // 服务器端执行
  async asyncData({ $axios }) {
    // 获取轮播图数据
    let { data: indexSwiperData } = await $axios.$get("index_swiper");
    // 获取分类树数据
    let { data: catTreeData } = await $axios.$get("index_cat_tree");
    return {
      indexSwiperData,
      catTreeData
    };
  },
  data() {
    return {
      value: 0, // 滚动条的值
      topFixedTop: -53,
      step: 0, // 当前加载数据的步骤 滚动到时才加载
      // 每日特价、品牌闪购
      tejiaData: [],
      shangouData: [],
      // 发现好货
      haohuoData: [],
      // 新品首发 排行榜 逛好店 领券
      xinpinData: [],
      paihangData: [],
      haodianData: [],
      lingquanData: [],
      // 频道广场
      pindaoData: [],
      // 推荐商品
      recData: []
    };
  },
  // 组件加载完之后执行 (Dom操作)
  mounted() {
    // 限制频率：当这个事件在0.5秒内没有被重新触发过时，才调用
    let fn = this.mydebounce(500, this.onScroll) // （防抖）
    // let fn = this.mythrottle(500, this.onScroll) // （节流）

    // 监听滚动事件
    window.addEventListener("scroll", fn);
  },
  methods: {
    // 防抖函数
    // 参数一、延迟的时间（单位：毫秒）
    // 参数二、函数
    mydebounce(delay, fn) {
      let st = null
      return function () {
        if (null != st) {
          // 关闭上一个定时器
          clearTimeout(st)
        }
        // 启动新的定时器
        st = setTimeout(fn, delay)
      }
    },
    // 节流函数
    mythrottle(delay, fn) {
      let st = null
      return function() {
        let currentTime = new Date().getTime()
        if (null != st) {
          st = currentTime
        }
        if (st + delay < currentTime) {
          fn()
          st = currentTime
        }
      }
    },
    onScroll() {
      console.log('滚动中~~')

      // 获取滚动的高度
      let st = getScrollTop();
      // 获取文档的高度
      let dt = getScrollHeight();
      // 获取浏览器屏幕的高度
      let wt = getWindowHeight() + 1; // 494 + 1
      // console.log(st)
      // console.log(wt)
      // console.log(wt + st)
      // console.log(dt)

      // 是否滚动到底: 浏览器屏幕的高度 + 获取滚动的高度 == 获取文档的高度
      if (wt + st >= dt) {
        if (this.step === 0) {
          // 加载每日特价、闪购数据
          this.$axios.$get("index_tejia").then(res => {
            this.tejiaData = res.data;
          });
          this.$axios.$get("index_shangou").then(res => {
            this.shangouData = res.data;
          });
          // 进入下一步
          this.step++;
          // console.log(this.step);
        } else if (this.step === 1) {
          // 加载发现好货数据
          this.$axios.$get("index_haohuo").then(res => {
            this.haohuoData = res.data;
          });
          this.step++;
          // console.log(this.step);
        } else if (this.step === 2) {
          this.xinpinData.push(121233);
          // this.paihangData.push(121233);
          // this.haodianData.push(121233);
          // this.lingquanData.push(121233);
          this.step++;
          // console.log(this.step);
        } else if (this.step === 3) {
          this.pindaoData.push(1223);
          this.step++;
        } else if (this.step === 4) {
          this.recData.push(12223);
          this.step++;
        }
      }

      // 判断滚动的位置
      if (st >= 685) {
        this.topFixedTop = 0;
      } else {
        this.topFixedTop = -53;
      }
    },
    onMove(pos) {
      console.log(pos);
    },
    onValue(value) {
      this.value = value;
      console.log(this.value);
    }
  }
};
</script>

<style lang="scss">
.index {
  background: #f2f2f2;
  .topfixed {
    position: fixed;
    // position: sticky;
    // top: 0px;
    width: 100%;
    height: 50px;
    background: #fff;
    border-bottom: 3px solid red;
    transition: all 0.5s;
    z-index: 999999;
  }
  .tj {
    margin-top: 20px;
  }
  .footer {
    height: 100px;
    background-color: #333;
  }
}
</style>